<!DOCTYPE html>
<html class="screen-full">
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>注册</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/party.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
		<link href="../css/login-modern.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<script src="../js/request.js"></script>
		<style>
			.mui-icon-eye {
				color: #FFFFFF !important;
			}
		</style>
	</head>
	<body>
		<!-- 动态粒子背景 -->
		<div class="particles">
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
			<div class="particle"></div>
		</div>
		<div class="login-container">
			<div class="login-card">
				<!-- Logo和标题区域 -->
				<div class="login-header">
					<div class="logo-container">
						<div class="logo-box">
							<img src="../image/logo.png" alt="Logo"/>
						</div>
						<div>
							<h1 class="login-title">账号注册</h1>
							<p class="login-subtitle">欢迎注册智能大棚环境监测系统</p>
						</div>
					</div>
				</div>
				<!-- 手机号输入框 -->
				<div class="input-group">
					<input type="text" class="input-field" placeholder="请输入手机号" id="phone">
					<div class="input-line"></div>
				</div>
				<!-- 密码输入框 -->
				<div class="input-group">
					<div class="password-wrapper">
						<input type="password" class="input-field" placeholder="请输入密码" id="pwd" maxlength="10">
						<button type="button" class="toggle-password" id="passwordToggle1" aria-label="切换密码可见状态">
							<i class="password-icon" id="passwordIcon1">👁️</i>
						</button>
						<div class="input-line"></div>
					</div>
				</div>
				<!-- 确认密码输入框 -->
				<div class="input-group">
					<div class="password-wrapper">
						<input type="password" class="input-field" placeholder="请输入确认密码" id="confirmPwd">
						<button type="button" class="toggle-password" id="passwordToggle2" aria-label="切换密码可见状态">
							<i class="password-icon" id="passwordIcon2">👁️</i>
						</button>
						<div class="input-line"></div>
					</div>
				</div>
				<!-- 返回登录 -->
				<div class="bottom-links" style="margin-top: 0; padding-top: 0; border-top: none;">
					<a href="#" class="bottom-link" id="goLogin">已有账号，去登录</a>
				</div>
				<!-- 注册按钮 -->
				<button class="login-button" id="loginBtn">确认注册</button>
			</div>
		</div>
		<script type="text/javascript">
			// 密码显示/隐藏功能
			function initPasswordToggle() {
				// 第一个密码框
				const passwordInput1 = document.getElementById('pwd');
				const toggleButton1 = document.getElementById('passwordToggle1');
				const passwordIcon1 = document.getElementById('passwordIcon1');
				
				// 第二个密码框
				const passwordInput2 = document.getElementById('confirmPwd');
				const toggleButton2 = document.getElementById('passwordToggle2');
				const passwordIcon2 = document.getElementById('passwordIcon2');
				
				// 初始状态
				let isPassword1Visible = false;
				let isPassword2Visible = false;
				
				// 切换第一个密码显示状态
				function togglePassword1() {
					isPassword1Visible = !isPassword1Visible;
					
					// 切换输入框类型
					passwordInput1.type = isPassword1Visible ? 'text' : 'password';
					
					// 切换图标
					passwordIcon1.textContent = isPassword1Visible ? '🙈' : '👁️';
					
					// 添加切换动画
					passwordIcon1.style.transform = 'scale(0.8)';
					setTimeout(() => {
						passwordIcon1.style.transform = 'scale(1)';
					}, 150);
				}
				
				// 切换第二个密码显示状态
				function togglePassword2() {
					isPassword2Visible = !isPassword2Visible;
					
					// 切换输入框类型
					passwordInput2.type = isPassword2Visible ? 'text' : 'password';
					
					// 切换图标
					passwordIcon2.textContent = isPassword2Visible ? '🙈' : '👁️';
					
					// 添加切换动画
					passwordIcon2.style.transform = 'scale(0.8)';
					setTimeout(() => {
						passwordIcon2.style.transform = 'scale(1)';
					}, 150);
				}
				
				// 绑定点击事件
				toggleButton1.addEventListener('click', togglePassword1);
				toggleButton2.addEventListener('click', togglePassword2);
			}
			
			// 页面加载完成后初始化
			document.addEventListener('DOMContentLoaded', function() {
				initPasswordToggle();
			});
			
			// 返回登录
			document.getElementById("goLogin").addEventListener("click", function(e) {
				e.preventDefault();
				mui.back();
			});
			
			// 注册功能
			document.getElementById("loginBtn").addEventListener("click", function() {
				var username = document.getElementById("phone").value;
				var password = document.getElementById("pwd").value;
				var confirmPassword = document.getElementById("confirmPwd").value;
				let baseUrl = localStorage.getItem("ip");
				
				if (username.trim() == "") {
					showError(document.getElementById("phone"), "请输入手机号");
					return;
				}
				var regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (!regPhone.test(username)) {
					showError(document.getElementById("phone"), "请输入正确的手机号");
					return;
				}
				if (password.trim() == "") {
					showError(document.getElementById("pwd"), "请输入密码");
					return;
				}
				if (password.trim() !== confirmPassword.trim()) {
					showError(document.getElementById("confirmPwd"), "确认密码与密码不一致");
					return;
				}
				
				request.post('/system/user/register', {
					userName: username,
					password
				}, (data) => {
					mui.toast("注册成功");
					mui.back();
					plus.webview.currentWebview().hide();
				}, (error, thrown) => {
					// 发生错误时，回调
				});
			});
			
			// 输入框动画
			document.querySelectorAll('.input-field').forEach(input => {
				input.addEventListener('focus', function() {
					this.parentElement.querySelector('.input-line').style.transform = 'scaleX(1)';
				});
				input.addEventListener('blur', function() {
					if (!this.value) {
						this.parentElement.querySelector('.input-line').style.transform = 'scaleX(0)';
					}
				});
			});
			
			// 错误提示
			function showError(input, message) {
				input.classList.add('error');
				const existingError = input.parentElement.querySelector('.error-message');
				if (existingError) existingError.remove();
				const errorDiv = document.createElement('div');
				errorDiv.className = 'error-message';
				errorDiv.textContent = message;
				input.parentElement.appendChild(errorDiv);
				setTimeout(() => {
					input.classList.remove('error');
					if (errorDiv.parentElement) errorDiv.remove();
				}, 3000);
			}
		</script>
	</body>
</html>